<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
		<style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }			
		</style>
        <style type="text/css">

#products img {
    margin:0 20px 10px 0;
    cursor:pointer;
}

.description {
    background-color:#edecbc;
    border:1px solid #999;
    width:450px;
    min-height:140px;
    display:none;
    margin-top:17px;
    -moz-border-radius:4px;
    padding:0 20px;
}

.description .arrow {
    width:34px;
    height:34px;
    background:transparent url(./img/tooltip/yellow.png) repeat scroll 0 -68px;
    margin-top:-28px;
    margin-left:36px;
    font-size:1px;
    position:relative;
}

#commercial .arrow {
    margin-left:210px;
}

#multidomain .arrow {
    margin-left:385px;
}           
        </style>
        <script type="text/javascript">
  $(function() {
      $("#products").tabs("div.description", {event:'mouseover'});
    });
        </script>
    </head>
    <body>
<div id="products">
  <img src="./img/global/commerce/free.png"
       alt="Free version" />
  <img src="./img/global/commerce/commercial.png"
       alt="Commercial version" />
  <img src="./img/global/commerce/multidomain.png"
       alt="Multidomain version" />
</div>

<div class="description" id="free">
  <div class="arrow">&nbsp;</div>
  <h3>Lorem ipsum dolor</h3>
  <p>
    Consectetur adipiscing elit. Curabitur tempus, massa at facilisis
    aliquet, urna metus interdum felis, sit amet adipiscing justo
    neque eget risus.
  </p>
  <p>
    <strong>Nullam ut ligula id dolor dapibus aliquam.</strong>
  </p>
</div>

<div class="description" id="commercial">
  <div class="arrow"></div>
  <h3>Maecenas molestie</h3>
  <p>
    Lacus ut blandit malesuada, sem magna varius enim, eu mattis elit
    justo in quam. Curabitur in magna. Nam luctus aliquet ante. Nam ut
    nunc. Quisque ligula nunc, molestie non, gravida sit amet,
    consequat eu, lectus. Proin aliquet nulla eget massa. Vestibulum
    ac dolor a tortor porta commodo.
  </p>
</div>

<div class="description" id="multidomain">
  <div class="arrow"></div>
  <h3>In hac habitasse platea dictumst</h3>
  <p>
    Quisque mattis gravida est. Vestibulum orci nisl, egestas vel,
    pharetra quis, auctor nec, lectus. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Vivamus sodales massa quis nunc. Sed
    velit risus, feugiat ut, pharetra a, venenatis et, arcu.
  </p>
</div>


    </body>
</html>
